<template>
  <el-dialog :title="'改价'" :close-on-click-modal="false" :visible.sync="visible" :append-to-body="true">
    <el-form v-loading="loading" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
      label-width="80px">
      <el-form-item label="房间总价">
        <el-popover placement="bottom" trigger="hover">
          <!-- 新版-->
          <div class="ant-popover-inner-content">
            <div class="recent_price_ul table_recent_price_ul">
              <table>
                <thead>
                  <tr>
                    <th>
                      <div class="list_box clear_float">
                        <span style="width: 100%;">价格</span>
                      </div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <div class="list_box clear_float">
                        <span v-for="(item, index) in prices.dateList" :key="index">
                          <div>{{dateList[index]}}</div>
                          <div style="margin-bottom: 6px;">
                            <el-input-number :disabled="dateList2[dateList[index]]" size="mini" @change="changeTotalPrice(prices.dateList)"
                              v-model="item[dateList[index]]" :precision="2" :step="100" :min="0"></el-input-number>

                          </div>
                        </span>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <span slot="reference">
            {{ totlMoney }}
            <i class="el-icon-edit" style="cursor: pointer;"></i>
          </span>
        </el-popover>
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input v-model="dataForm.certificatesNumber" placeholder="原因" type="textarea"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :disabled="loading" @click="visible = false">{{$t('Common.Cancel')}}</el-button>
      <el-button :disabled="loading" type="primary" @click="changePriceReq()">{{ $t('Common.Confirm') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import moment from 'moment';
  export default {
    data() {
      return {
        loading: false,
        dateList2: {

        },
        roomPrices: [],
        totlMoney: 0,
        dateList: [],
        visible: false,
        item: {},
        prices: {
          dateList: []
        },
        dataForm: {
          remarks: '',
        },
        dataRule: {
          sellerId: [{
            required: true,
            message: '商家不能为空',
            trigger: 'blur'
          }],
        }
      };
    },
    components: {},
    methods: {
      //加载日期
      getdateList() {
        this.dateList = [];
        //加载日期
        for (var i = 0; i < 999; i++) {
          this.dateList.push(
            moment(this.item.arrivalsTime)
            .add(i, 'days')
            .format('YYYY-MM-DD')
          );
        }
      },
      //计算总金额
      changeTotalPrice(list) {
        this.totlMoney = 0;
        list.forEach((item, index) => {
          this.totlMoney += parseFloat(item[this.dateList[index]]);
        });
        this.totlMoney = this.totlMoney.toFixed(2);
      },
      init(item) {
        Object.assign(this.$data, this.$options.data())
        this.visible = true;
        this.item = item;
        this.getdateList();
        this.reqRoomPrice(item.id);
      },
      //请求房价
      reqRoomPrice(peopleId) {
        this.loading = true;
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinpeople/reqRoomPrice/${peopleId}`),
          method: 'post',
          params: this.$http.adornParams({})
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.roomPrices = data.data.list
            this.prices = data.data.price
            this.prices.dateList.forEach((item, index) => {
              for (var key in item) {
                var day = moment(key).diff(moment(), 'days')
                this.dateList2[key] = day < 0
              }
            })
            this.$nextTick(() => {
              this.changeTotalPrice(this.prices.dateList)
            })
          } else {
            this.$message.error(data.msg)
          }
          this.loading = false;
        })
      },
      //改价
      changePriceReq() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.loading = true;
            this.$http({
              url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinpeople/change_peice`),
              method: 'post',
              data: this.$http.adornData({
                floorRoomId: this.item.floorRoomId,
                newPrices: JSON.stringify(this.prices),
              })
            }).then(({
              data
            }) => {
              this.loading = false;
              if (data && data.code === 0) {
                this.$nextTick(() => {
                  this.$emit('refreClosing');
                  this.$emit('refreshDataList')
                });
                this.visible = false
                this.$message({
                  message: this.$t('Common.OperationSuccessful'),
                  type: 'success',
                  duration: 1500,
                  onClose: () => {

                  }
                });
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  .ant-popover-inner-content {
    padding: 12px 16px;
    color: #002140;

    .table_recent_price_ul {
      max-width: 900px;

      table {
        border-collapse: collapse;
        width: 100%;

        thead,
        th,
        tr,
        tt,
        u,
        ul,
          {
          font: inherit;
          font-size: 100%;
          margin: 0;
          padding: 0;
          vertical-align: initial;
          border: 0;
        }


      }

    }

  }

  .recent_price_ul table th>.list_box>span {
    line-height: 36px;
    background: #f0f0f0;
    height: 36px;
  }

  .table_recent_price_ul.table_recent_price_ul table tbody tr td:first-of-type .list_box span {
    height: calc(100% + 1px);
  }

  .recent_price_ul table td>.list_box>span {
    height: 95px;
  }

  .recent_price_ul table td>.list_box>span,
  .recent_price_ul table th>.list_box>span {
    float: left;
    width: 150px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, .25);
    margin-left: -1px;
    margin-top: -1px;
  }

  .recent_price_ul table td:first-of-type>.list_box span>div:first-of-type,
  .recent_price_ul table td>.list_box>span>div:first-of-type {
    margin-top: 8px;
    margin-bottom: 6px;
  }

  .table_recent_price_ul.table_recent_price_ul td:nth-of-type(2) .list_box {
    max-height: 340px;
    overflow: auto;
  }
</style>
